<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>选择学生界面</title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" type="text/css" href="../../css/api.css">
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css">
</head>
<style type="text/css">
	body{
		-webkit-user-select:none; 
	    -moz-user-select:none; 
	    -ms-user-select:none; 
	    user-select:none;
	}
	.section{
		/* width: 33.33333333333333333333%; */
		height: 40px;
		/* margin-top: 10px; */
		background-color: white;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		color: black;
		font-size: 16px;
        border: 1px solid #dedede;
	}
	.main{
    	position: relative;
    }
    #middle{
    	position: relative;
    	/* background-color: red; */
    }
    #teamName{
    	position: absolute;
    	left: 24px;
    	right: 24px;
    	text-align: center;
    	/* background-color: yellow; */
    }
    #arrow_down{
    	position: absolute;
    	top: 9px;
    	right: 3px;
    	width: 20px;
		height: 20px;
    }
    .duigouFrame{
        width: 14px;
        height: 14px;
    }
    .mui-table-view-cell {
    	clear: both;
    	width: 100%;
		height: 40px;
		line-height: 40px;
        background-color: white;
        color: black;
        vertical-align: middle;
        padding: 0px;
    }
	.mui-table-view-cell.mui-active{
		color: black;
		background-color: #f0f0f0;
	}
    .cell1{
        width: 25%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
    .cell2{
        width: 50%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
    .cell3{
        width: 25%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		float: left;
		position: relative;
		font-size: 14px;
		vertical-align: middle;
		color: black;
    }
</style>
<body>
	<div class="main" id="main" hidden="hidden" style="margin-top: 10px;">
	    <div id="header"  class="header" hidden="hidden">
	    	<div id="checkdeAllBtn" class="section" style="width: 25%;" onclick="allselect()">全选</div>
		    <div id="middle" class="section"  style="width: 50%;" onclick="openGroupClick()"><span id="teamName">全部分组</span><img id="arrow_down" src="../../image/icon_category_down.png" class="arrow_down" alt="">
		    </div>
		    <div id="right" class="section" style="width: 25%;" >
		    	学生姓名
		    </div>
	    </div>
	    <div id="checkboxes" class="zhongjian">
            <!-- <div class="cellbox">
            	<div id="left" class="cell">
					<div class="mui-input-row mui-checkbox mui-left " style="height: 38px;" >
					<input name="checkbox" value="Item 0" type="checkbox" >
					</div>
			    </div>
			    <div id="middle" class="cell">
				    产品组
			    </div>
			    <div id="right" class="cell">
			    	吕磊
			    </div>
            </div> -->
	    </div>
	</div>
</body>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript">
    var markisshow = false;
    var gder = 0;          //这3个蒙版用的
    var openGroup = 0;
    var dataSource = [];   //总的数据源
	var USER = [];
	var TEAM = [];
	var data = "";    //当前展示的数据
	var stuDataSourece = [];   //学生按小组分的数组
	var stuDataAll = []; //学生端直接解析下来的样子

	var whiteGou = '';
	var greenGou = '';
    
    var tmpClickArr = [];
    var selectAllYesOrNo = 0;
    var teaData = "";   //存放教师端请求下来没动的数据
    var nameArray=[];
	apiready = function(){
		whiteGou = '../../image/icon_unselecDuigou.png';
		greenGou = '../../image/icon_duigou.png';
        if ($api.getStorage('tmpSelectedUid').length > 0) {
			tmpClickArr = $api.getStorage('tmpSelectedUid');
		}
      	loadData();
		// alert("uid"+$api.getStorage('cfnetppuid'));
		// alert("jid"+$api.getStorage('cfnetppjxid'));
		// alert("pid"+api.pageParam.pid);
		// alert("rid"+api.pageParam.cid);
		// $api.setStorage('tmpSelectedUid', "");
     	api.addEventListener({
	        name: 'selectTeamStuNotification'
	    }, function(ret, err) {
	    	openGroupClick();
	        if (ret.value.index == 100) {
	        	initCellDataTea(dataSource);
	        	$('#teamName').text("全部分组");
	        }else{
	        	initTea2(dataSource[ret.value.index]);
	        	$('#teamName').text(TEAM[ret.value.index]);
	        	if ($('#teamName').text().length>10) {
                   var aaa = $('#teamName').text();
                   aaa = aaa.substr(0,10);
                   $('#teamName').text(aaa+"...");
	        	}
	        }
	    });
     	api.addEventListener({
	        name: 'scrollTop'
	    }, function(ret, err) {
	    	$('html,body').animate({scrollTop: '0px'}, 100);
	    });
     	api.addEventListener({
	        name: 'closeSelectTeamFrameNotification'
	    }, function(ret, err) {
            hideSelectTeam();
            $('#arrow_down').attr('src','../../image/arrow_down.png');
            openGroup = 0;
	    });
     	api.addEventListener({
	        name: 'selectctStuNotification'
	    }, function(ret, err) {
            //tmpSelectedUid  tmpClickArr
            if (tmpClickArr.length > 0) {
            	$api.setStorage('tmpSelectedUid', tmpClickArr);
            	api.closeWin();
            }else{
            	ShowToast("请选择学生");
            }
	    });
	}
	function initTea2 (data) {
		var content = "";
		var allUids = [];
		for (var i = 0; i < data.user.length; i++) {
			var item = data.user[i];
            var onclick = '';
            var label = '';
            var imgColor = '';
			if (item.isstatus == 1) {  //评了
				label = '<span style="position: absolute;right: 0px;">已评</span>';
			}else{   //没评
				onclick = ' onclick="clickCell(\'' + item.rename + '\','+item.uid+')"';
				allUids.push(item.uid);
			}
			if (isContains(item.uid,tmpClickArr)) {
            	imgColor = greenGou;
            }else{
            	imgColor = whiteGou;
            }            
            content += '<div class="mui-table-view-cell"'+ onclick +'">'+
            	'<div id="left" class="cell1">'+
					'<img class="duigouFrame" id="index'+item.uid+'" src="'+imgColor+'" alt="">'+label+
			    '</div>'+
			    '<div id="middle" class="cell2">'+
				    data.title+
			    '</div>'+
			    '<div id="right" class="cell3">'+
			    	item.rename+
			    '</div>'+
            '</div>';
		}
		$api.setStorage('allUids', allUids);
        $('#checkboxes').html(content);
	}
	function loadData () {
        showProgress();
        var params = {
        	uid : $api.getStorage('cfnetppuid'),
        	jid : $api.getStorage('cfnetppjxid'),
        	pid : api.pageParam.pid,
        	vid : api.pageParam.vid
        };
        // console.log(JSON.stringify(params) + '\n' + url_getStudyList);
        cfnetppPOST(url_getStudyList,params,true,function(data, status){
            api.hideProgress();
            if (status == 'success') {
				if (data.code == 200) {
//					 alert(JSON.stringify(params));
//					 alert(JSON.stringify(data));
					$('#main').show();
					$('#header').show();
                    for (var i = 0; i < data.data.length; i++) {
                    	var item = data.data[i];
                    	if (item.user.length > 0) {
                    		dataSource.push(item);
                    	}
                    }
					initCellDataTea(dataSource);
				}
			}
		});
	}
	function addObject (teamname) {
		if ($.inArray(teamname,TEAM) > -1)  {
			
		} else {
			TEAM.push(teamname);
		}
        
	}
	function clickCell(name,uid) {
    	var imgId = "index"+uid;
        // alert("前"+JSON.stringify(tmpClickArr));
		if (isContains(uid,tmpClickArr)) {
			removeByValue(tmpClickArr,uid);
			removeByValue(nameArray,name);
			// alert("移除了");
	        $('#'+imgId).attr('src', whiteGou);
		} else {
			tmpClickArr.push(uid);
			nameArray.push(name)
			// alert("添加了");
	        $('#'+imgId).attr('src', greenGou);
		}
		// alert("后"+JSON.stringify(tmpClickArr));
        $api.setStorage('tmpSelectedUid', tmpClickArr);
        $api.setStorage('tmpSelectedName', nameArray);
    }
    function allselect() {  //全选按钮被点击
    	if (selectAllYesOrNo == 0) {
    		selectAllYesOrNo = 1;
    		var allUids = $api.getStorage('allUids');
    		var allName = $api.getStorage('allName');
			tmpClickArr = allUids;
			nameArray =  allName;
			// $api.setStorage('tmpSelectedUid', tmpClickArr);
			$api.setStorage('tmpSelectedUid', $api.getStorage('allUids'));
			$api.setStorage('tmpSelectedName', $api.getStorage('allName'));
			// alert($api.getStorage('tmpSelectedUid'));
			for (var i = 0; i < allUids.length; i++) {
				var imgId = "index"+allUids[i];
				$('#'+imgId).attr('src', greenGou);
			}
            $('#checkdeAllBtn').html("取消全选");
    	} else {
    		selectAllYesOrNo = 0;
            var allUids = $api.getStorage('allUids');
			tmpClickArr = [];
			nameArray = [];
			$api.setStorage('tmpSelectedUid', []);
            $api.setStorage('tmpSelectedName', []);
			for (var i = 0; i < allUids.length; i++) {
				var imgId = "index"+allUids[i];
				$('#'+imgId).attr('src', whiteGou);
			}
			$('#checkdeAllBtn').html("全选");
    	}
	}
    function isContains(obj, arr) {
		if ($.inArray(obj, arr) != -1) {
			return true;
		}
	}
    function removeByValue(arr, val) {
		for(var i=0; i<arr.length; i++) {
		    if(arr[i] == val) {
		      	arr.splice(i, 1);
		      	break;
		    }
		}
	}
	function initCellDataTea (data) {
		var content = "";
		USER = [];
        var allUids = [];
        var allName = [];  //所有可评的名字
		if (data.constructor == Array && data.length > 0){
			TEAM = [];
			for (var j = 0; j < data.length; j++) {
				var team = data[j];
	            if (team.user.length>0) {
	            	TEAM.push(team.title);
	            }
				var users = team.user;
				for (var i = 0; i < users.length; i++) {
                    var item = {};
					var user = users[i];
					item.user = user;
					item.title = team.title;
					USER.push(item);
				}
		  	}
		  	// alert(JSON.stringify(TEAM));
			for (var j = 0; j < USER.length; j++) {
	        	var item = USER[j];
	        	var user = item.user;
                var onclick = '';
	            var label = '';
	            var imgColor = '';
				if (user.isstatus == 1) {  //评了
					label = '<span style="position: absolute;right: 0px;">已评</span>';
				}else{   //没评
					onclick = ' onclick="clickCell(\'' + user.rename + '\','+user.uid+')"';
					allUids.push(user.uid);
					allName.push(user.rename);
				}
				if (isContains(user.uid,tmpClickArr)) {
                	imgColor = greenGou;
                }else{
                	imgColor = whiteGou;
                }
	            content += '<div class="mui-table-view-cell"'+ onclick +'">'+
	            	'<div id="left" class="cell1">'+
						'<img class="duigouFrame" id="index'+user.uid+'" src="'+imgColor+'" alt="">'+label+
				    '</div>'+
				    '<div id="middle" class="cell2">'+
					    item.title+
				    '</div>'+
				    '<div id="right" class="cell3">'+
				    	user.rename+
				    '</div>'+
	            '</div>';
			}
			// alert(JSON.stringify(content))
			$api.setStorage('allUids', allUids);
			$api.setStorage('allName', allName);
			// alert(JSON.stringify(allUids));
		}else{
            for (var i = 0; i < data.user.length; i++) {
				var user = data.user[i];
				var onclick = '';
	            var label = '';
	            var imgColor = '';
				if (user.isstatus == 1) {
					label = '<span style="position: absolute;right: 0px;">已评</span>';
				}else{
					onclick = ' onclick="clickCell(\'' + user.rename + '\','+user.uid+')"';
					allUids.push(user.uid);
					allName.push(user.rename);
				}
				if (isContains(user.uid,tmpClickArr)) {
                	imgColor = greenGou;
                }else{
                	imgColor = whiteGou;
                }
				content += '<div class="mui-table-view-cell"'+ onclick +'">'+
	            	'<div id="left" class="cell1">'+
						'<img class="duigouFrame" id="index'+user.uid+'" src="'+imgColor+'" alt="">'+label+
				    '</div>'+
				    '<div id="middle" class="cell2">'+
					    item.title+
				    '</div>'+
				    '<div id="right" class="cell3">'+
				    	user.rename+
				    '</div>'+
	            '</div>';
			}
			$api.setStorage('allUids', allUids);
			$api.setStorage('allName', allName);
			// alert(JSON.stringify(allUids));
		}
        // alert(JSON.stringify(TEAM));
		$('#checkboxes').html(content);
		// alert(JSON.stringify(content));
	}
	function openGroupClick () {
		if (openGroup == 0) {
			showSelectTeam();
			// $('#arrow_down').attr('src','../../image/arrow_right.png');
            openGroup = 1;
		}else{
            hideSelectTeam();
			// $('#arrow_down').attr('src','../../image/arrow_down.png');
            openGroup = 0;
		}
	}
	function showSelectTeam(){
		openframe();
		api.setFrameAttr({
		    name: 'selectTeamStu',
		    hidden: true
		});
	}
	function hideSelectTeam(){
		api.setFrameAttr({
		    name: 'selectTeamStu',
		    hidden: false
		});
	}
	function openframe() {
		var y = 44+22+40+10;
		var h = 'auto';
		if ($api.getStorage('cfnetSelectType') ==0) {
			dataSource = stuDataSourece;
		} else {

		}
		api.openFrame({
			name : 'selectTeamStu',
			url : 'selectTeamStu.html',
			rect : {
				x : 0,
				y : y,
				w : 'auto',
				h : h
			},
			pageParam : {
				sections :  TEAM,
				data : dataSource
			}
		});
	}
</script>
</html>
